<template>
  <div class="operate-proc-list-box">
    <div class="mb-10" >
      {{ $t('other.selectProcVer') }}：
      <span v-if="props.operateType == 'add' && checkedProc">
        <a-select :placeholder="$t('common.pleaseSelect')" v-model:value="version"   @change="()=> {getProcessDetails()}">
          <a-select-option v-for="item in processList" :key="item" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </span>
      <span v-else-if="props.operateType == 'edit' && checkedProc">
        <a-select :placeholder=" props.version ? props.version :$t('common.pleaseSelect') " v-model:value="version"   @change="()=> {getProcessDetails()}" :disabled="!checkedProc ||  !(!props.version)" >
          <a-select-option v-for="item in processList" :key="item" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </span>
      <span v-else>
        <a-select :placeholder=" props.version ? props.version :$t('other.notOptional') " v-model:value="version"   @change="()=> {getProcessDetails()}" :disabled=" true " >
          <a-select-option v-for="item in processList" :key="item" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </span>


    </div>
    <header v-if="checkedProc">
      <div v-for="(item, index) in listHeaders" :key="index" :class="{'fixed-width': [ 0,1,2,3,4].includes(index)}">
        {{item}}
      </div>
    </header>
    <div v-if="checkedProc">
      <div class="inner-process-list-box mt-12" v-for="(element, index) in  processInfoList" :key="index">
      <div class="fixed-width"> {{element.sortField}}</div>
      <div class="fixed-width"> {{element.section}}</div>
      <div class="fixed-width"> {{element.processNo}}</div>
      <div class="fixed-width">
        <a-tooltip>
          <template #title>{{element.name}}</template>
          <span>{{element.name}}</span>
        </a-tooltip>
      </div>
      <div class="fixed-width"> {{element.processCode}}</div>
      <div> {{element.standardSeconds}} </div>
      <div> {{element.labourCost}} </div>
      <div>
        <a-tooltip>
          <template #title>{{element.processGuide}}</template>
          <span>{{element.processGuide}}</span>
        </a-tooltip>
      </div>
      <div class="fixed-width">
        <span class="code-link" @click="operateImg(element,index)">
          <span v-if="element.processPictureUrlList && element.processPictureUrlList.length">{{$t('common.look')}}</span>
        </span>
      </div>
      <div>
        <a-select :placeholder="$t('common.pleaseSelect')" v-model:value="element.professionId" min="0"  allowClear :disabled="props.operateType == 'details' ">
          <a-select-option v-for="item in professionIdList" :key="item" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </div>
      <div>
        <a-select :placeholder="$t('common.pleaseSelect')" v-model:value="element.skillGradeId" min="0" allowClear :disabled="props.operateType =='details' ">
          <a-select-option v-for="item in skillGradeId" :key="item" :value="item.id">{{ item.grade }}</a-select-option>
        </a-select>
      </div>
    </div>
    </div>
    <UploadModal ref="uploadModalRef" @ok="onImgOk" />
  </div>
</template>
<script setup>
import { listHeaders } from './config'
import {onMounted, ref, watch} from 'vue'
import {cloneDeep} from "lodash";
import axios from "@/utils/request"
import UploadModal from './uploadModal.vue'

let version = ref()
let processInfoList = ref([])
let processList = ref([])
let uploadModalRef = ref()
let professionIdList = ref([])
let skillGradeId = ref([])
let autoRoadmapProcVO = ref([])
let checkedProc = ref(true)

const operateImg = (record, index, isEdit) => {
  uploadModalRef.value.open(record.processPictureUrlList, index, isEdit)
}
const onImgOk = (fileList, index) => {
  processInfoList.value[index].processPictureUrlList = fileList
}
// 工序详情
const getProcessDetails = async () => {
  // listLoading.value = true
  try {
    // console.log(version.value)
    const res = await axios.getAction('/api/mo/mo-proc/get', { id: version.value })
    // console.log(res)
    if (res.success) {
      autoRoadmapProcVO.value['name'] = res.data.name;
      // autoRoadmapProcVO.value['id'] = res.data.id;
      res.data.moProcDetailVOList && res.data.moProcDetailVOList.forEach(i=>i.id = null)
      processInfoList.value = res.data.moProcDetailVOList;
    }
    // listLoading.value = false
  } catch {
    // listLoading.value = false
  }
}

const props = defineProps({
  version: { type: String, default: () => '' },
  operateType: { type: String, default: () => '' },
  processInfoList: { type: Array, default: () => [] },
  processList: { type: Array, default: () => [] },
  checkedProc: { type: Boolean, default: () => false },
  isDetails: { type: Boolean, default: () => false }
})

watch(
    () => props.checkedProc,
    (newVal) => {
      checkedProc.value = cloneDeep(newVal)
    },{ deep: true, immediate: true }
)
watch(
    () => props.processList,
    (newVal) => {
      processList.value = cloneDeep(newVal)
      // console.log(processList.value,'processList------')
    },{ deep: true, immediate: true }
)
watch(
    () => props.processInfoList,
    (newVal) => {
      processInfoList.value = cloneDeep(newVal)
      // console.log(newVal ,'processInfoList------------' )
    }, { deep: true, immediate: true }
)


onMounted(async ()=>{
  const res = await axios.postAction('/api/basic/profession/list-profession')
  if (res.success){
    professionIdList.value = res.data;
  }
  const resSkill = await axios.postAction('/api/basic/skill-grade/list')
  if (resSkill.success){
    skillGradeId.value = resSkill.data;
  }
})
defineExpose({
  processInfoList,
  autoRoadmapProcVO,
})
</script>